<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/head::head"></head>
<body class="gray-bg">

<!--from表单提交给/role发请求-->
<form id="ec" th:action="@{/role}" method="post">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">

                    <!--高级查询条件-->
                    <table class="table form-table margin-bottom10">
                        <tr>
                            <td>
                                <input type="text" name="roleName" th:value="${#maps.containsKey(filters, 'roleName')} ? ${filters.roleName} : ''" placeholder="角色名称" class="input-sm form-control"/>
                            </td>
                        </tr>
                    </table>
                    <!--搜索/新增刷新按钮-->
                    <div>
                        <button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索</button>
                        <button type="button" class="btn btn-sm btn-primary create">新增</button>
                        <button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新</button>
                    </div>
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>角色名称</th>
                            <th>角色编码</th>
                            <th>描述</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="gradeX" th:each="item,it : ${page.list}">
                            <td class="text-center" th:text="${it.count}">11</td>
                            <td th:text="${item.roleName}">22</td>
                            <td th:text="${item.roleCode}">33</td>
                            <td th:text="${item.description}">33</td>
                            <td th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>

                            <td class="text-center">
                                <a class="edit" th:attr="data-id=${item.id}">修改</a>
                                <a class="delete" th:attr="data-id=${item.id}">删除</a>
                            </td>

                        </tr>
                        </tbody>
                    </table>
                    <!--分页信息-->
                    <div class="row" th:include="common/pagination::pagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>

<script th:inline="javascript">
    $(function(){
        //点击添加按钮去到新增页面
        $(".create").on("click",function () {
            opt.openWin("/role/create","新增角色",620,420);
        });

        //点击修改按钮去到修改页面
        $(".edit").on("click",function () {
            var id = $(this).attr("data-id");
            opt.openWin("/role/edit/"+id,"角色修改",620,420);
        });

        //点击删除按钮去删除页面
        $(".delete").on("click",function () {
            var id = $(this).attr("data-id");
            opt.confirm("/role/delete/" + id, "角色删除", 620, 420);
        });
    });
</script>
</body>
</html>